<template>
    <div class="container">
        <div class="search">
            <van-search
                v-model="searchInput"
                show-action
                shape="round"
                placeholder="请输入搜索关键词"
                @search="serch"
            >
                <template #action>
                    <div @click="serch">搜索</div>
                </template>
            </van-search>
        </div>
        <!-- <div class="history-search">
            <div class="history-search-title">最近搜索</div>
            <div class="list">
                <div class="item">果冻橙</div>
            </div>
        </div> -->
        <div class="data-list">
            <div class="total">为您找到约{{ total }}条信息</div>
            <nuxt-link
                v-for="(item, index) in dataList"
                :key="index"
                :to="`/cswd/${item.id}.html`"
                target="_blank"
                class="data-item"
            >
                <div class="title" v-html="item.title"></div>
            </nuxt-link>
        </div>

        <div class="page">
            <van-pagination
                v-model="page"
                :total-items="total"
                :show-page-size="3"
                :items-per-page="limit"
                force-ellipses
                @change="changePage"
            />
        </div>

        <van-overlay :show="loading">
            <div class="wrapper" @click.stop>
                <van-loading vertical color="#ffffff">加载中...</van-loading>
            </div>
        </van-overlay>
    </div>
</template>

<script>
import { goTopSmooth, hightLightText } from "@/assets/utils/utils";
import { new_xungetsearch } from "@/assets/api/csjhApi.js";
import { getanalysedata } from "@/assets/api/indexApi";

export default {
    name: "QuizDataSearch",
    async asyncData({ params, query }) {
        let data = {};

        return data;
    },
    layout: "home",
    head() {
        return {
            title: "小竹财税问答-【小竹财税平台】",
            meta: [
                {
                    hid: "keywords",
                    name: "keywords",
                    content: "小竹财税问答,财税问答",
                },
                {
                    hid: "description",
                    name: "description",
                    content:
                        "小竹财税问答栏目汇集众多税专家及财税专业导师，他们在财税领域有着丰富的实践经验和深厚的理论功底，能够及时准确的为广大财税从业者和学习者提供专业答疑服务。",
                },
            ],
        };
    },
    computed: {},
    data() {
        return {
            searchInput: "",
            total: 0,
            limit: 10,
            page: 1,

            loading: false,

            dataList: [],
        };
    },
    mounted() {
        this.searchInput = this.$route.query.k;
        this.getList();
        getanalysedata({
            m_id: 4,
            type: 1,
            describe: this.searchInput,
            code: "PC8",
        });
    },
    watch: {
        $route(n, o) {
            if (n) {
                this.searchInput = n.query.k;
                this.page = 1;
                this.getList();
            }
        },
    },
    methods: {
        async getList() {
            this.loading = true;
            const res = await new_xungetsearch({
                keyword: this.searchInput,
                type: "xiaozhuwenda",
                page: this.page,
                limit: this.limit,
            });

            if (res.code == 1) {
                this.total = res.data.count;
                this.dataList = res.data.list;
                for (let item of this.dataList) {
                    item.title = hightLightText(item.title, this.searchInput);
                }
                goTopSmooth();
            }
            this.loading = false;
            console.log(this.dataList);
        },
        changePage(page) {
            this.page = page;
            this.getList();
        },
        serch() {
            this.$router.push({
                path: "/cswd/search",
                query: {
                    k: this.searchInput,
                },
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.container {
    // background-color: #f6f6f6;
}

.search {
    padding: 0.7rem 0.2rem;
}

.data-list {
    background-color: #f6f6f6;
    padding: 0 0.9rem;
    min-height: 100vh;
    .total {
        color: #666666;
        font-size: 0.75rem;
        padding: 0.4rem 0;
    }
}

.data-item {
    display: block;
    background-color: #ffffff;
    padding: 0.5rem 0.6rem;
    margin-bottom: 0.6rem;
    border-radius: 0.2rem;
    .title {
        color: #3d3d3d;
        font-size: 1rem;
        margin-bottom: 0.35rem;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
    }
    .content {
        font-size: 0.75rem;
        color: #999999;
    }
    .date {
        margin-top: 0.35rem;
        color: #999999;
        font-size: 0.68rem;
    }
    > div {
        white-space: nowrap; /* 不换行 */
        overflow: hidden; /* 超出部分隐藏 */
        text-overflow: ellipsis; /* 超出部分显示省略号 */
        -webkit-line-clamp: 2; /* 限定显示的行数，这里设置为3行 */
        -webkit-box-orient: vertical; /* 这使得display:-webkit-box生效 */
        display: -webkit-box; /* 作为flex容器的webkit版本 */
        white-space: normal;
        line-height: 1.5;
    }
}

.page {
    padding: 1rem 0;
}
.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}


</style>
